<template>
	<view class="contents">
		<view class="header-search">
			<u--form :model="form">
				<u-form-item label="经费类型:" border-bottom='false' @tap='showtype = true' :labelWidth='80'>
					<u--input v-model="form.obj1" disabled disabledColor="#ffffff" border='node' placeholder="请选择">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="维修时间:" @tap='timeshow = true' :labelWidth='80'>
				<u--input  v-model="form.time" disabled disabledColor="#ffffff"
					placeholder="选择时间">
				</u--input>
				<image class='up' src="../../static/up.png" mode=""></image>
				</u-form-item>
			</u--form>

		</view>
		<view class="title">
			经费使用情况
		</view>
		<view class="charts-box">
			<l-echart ref="charts"></l-echart>
		</view>
		<view class="title">
			<view>
				车辆维修情况
			</view>
		</view>
		<view class="charts-box" v-show="!showtype&&!timeshow">
			<l-echart ref="chart"></l-echart>
		</view>
		<view class="plate_search">
			<u--form :model="form1">
				<u-form-item label="车牌号:"  :labelWidth='60'>
					<u--input v-model="form.o" style='width: 326rpx;' placeholder="请选择">
					</u--input>
					<u-button type="primary" color='#4f82e6' style='width: 180rpx;margin-left: 15rpx;height: 68rpx;'
						text="搜索"></u-button>
				</u-form-item>
			</u--form>
		</view>
		<view class="table">
			<view class="table_header">
				<view class="header_item">
					车牌号
				</view>
				<view class="header_item">
					维修次数
				</view>
				<view class="header_item1">
					一年内多次维修部位
				</view>
			</view>
			<view class="table_content" v-for="item in list" :key="item.title">
				<view class="item_content color" @tap="clickTitle(item)">
					{{item.title}}
				</view>
				<view class="item_content">
					{{item.num1}}
				</view>
				<view class="item_content2">
					{{item.num2}}
				</view>
			</view>
		</view>
		<view class="">
			<u-picker @cancel='showtype=false' :show="showtype" ref="uPicker" :columns="actions" @confirm="confirm">
			</u-picker>
		<u-calendar @close='timeshow=false' :show="timeshow" mode="range" @confirm="confirmTime"></u-calendar>	
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts'
	import LEchart from '../components/l-echart/l-echart.vue';
	export default {
		data() {
			return {
				list: [{
						title: '闽F8249',
						num1: 3,
						num2: 6
					},
					{
						title: '闽F1226',
						num1: 1,
						num2: 2
					},
					{
						title: '闽F8609',
						num1: 4,
						num2: 3
					},
				],
				form1: {
					o: '',
				},
				opts: {
					title: {
						zlevel: 0,
						subtext: '总金额\n 100元',
						subtextStyle: {
							color: '#000',
							fontWeight: 'bold',
							fontSize: 16
						},
						x: '130', //文字位置
						y: '120' //文字位置
					},
					legend: {
						orient: 'vertical',
						top: "200",
						right: '50'
					},
					series: [{
						name: 'Access From',
						type: 'pie',
						center: ['40%', '50%'],
						radius: ['30%', '50%'],
						label: {
							show: true,
							color: 'red',
							formatter: '{b}\n {d}',
						},
						labelLine: {
							length: 10,
							length2: 10
						},
						data: [{
								value: 1048,
								name: '未使用',
								label: {
									color: "#01a1fe"
								},
								itemStyle: {
									normal: {
										color: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
											offset: 0,
											color: '#01a1fe'
										}, {
											offset: 1,
											color: '#0543fd'
										}]),
									}
								}
							},
							{
								value: 735,
								name: '已使用',
								label: {
									color: "#ea7810"
								},
								itemStyle: {
									normal: {
										color: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
											offset: 0,
											color: '#ea7810'
										}, {
											offset: 1,
											color: '#f7ad0b'
										}]),
									}
								}
							},
						]
					}]
				},
				form: {
					obj1: '',
					time: '',
					time1: ''
				},
				actions: [
					['中国', '美国', '日本']
				],
				showtype: false,
				timeshow:false,
				option: {
					legend: {
						orient: 'vertical',
						top: "70",
						right: '50'
					},
					series: [{
						name: 'Nightingale Chart',
						type: 'pie',
						radius: [10, 100],
						center: ['40%', '50%'],
						roseType: 'area',
						itemStyle: {
							borderRadius: 3,
						},
						label: {
							show: false,
						},
						data: [{
							"name": "京aaa11",
							"value": 50,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
										offset: 0,
										color: '#44a1f9'
									}, {
										offset: 1,
										color: '#4dc3ec'
									}]),
								}
							}
						}, {
							"name": "京aaa22",
							"value": 30,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
										offset: 0,
										color: '#e35846'
									}, {
										offset: 1,
										color: '#e25d45'
									}]),
								}
							}
						}, {
							"name": "京aaa33",
							"value": 50,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
										offset: 0,
										color: '#faa14b'
									}, {
										offset: 1,
										color: '#ff9d45'
									}]),
								}
							}
						}, {
							"name": "京aaa39",
							"value": 35,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
										offset: 0,
										color: '#4de49e'
									}, {
										offset: 1,
										color: '#17b7a6'
									}]),
								}
							}
						}, {
							"name": "京aaa99",
							"value": 20,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
										offset: 0,
										color: '#8d62f2'
									}, {
										offset: 1,
										color: '#6e51e2'
									}]),
								}
							}
						}]
					}]
				},
			}
		},
		components: {
			LEchart
		},
		mounted() {
			this.$refs.chart.init(echarts, chart => {
				chart.setOption(this.option);
			});
			this.$refs.charts.init(echarts, chart => {
				chart.setOption(this.opts);
			});
		},
		methods: {
			clickTitle(item) {
				uni.showToast({
					title: item.title,
					icon: 'none'
				})
			},
			seedetails() {
				uni.showToast({
					title: '跳转'
				})
			},
			confirm(e) {
				this.form.obj1 = e.value[0]
				this.showtype = false
			},
			confirmTime(e) {
				this.form.time = e[0] + '~' + e[e.length - 1]
				this.timeshow = false
			},
			
			getDate(format = 'Y-M-D h:m:s', time = null) {
				let date = null

				if (time) {
					date = new Date(time) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				} else {
					date = new Date()
				}
				let formatArr = ['Y', 'M', 'D', 'h', 'm', 's']
				let timeObj = {
					Y: date.getFullYear(),
					M: date.getMonth() + 1,
					D: date.getDate(),
					h: date.getHours(),
					m: date.getMinutes(),
					s: date.getSeconds()
				}

				for (const key in timeObj) {
					if (timeObj[key] < 10) {
						timeObj[key] = '0' + timeObj[key]
					}
				}

				for (const keyWord of formatArr) {
					if (format.indexOf(keyWord) !== '-1') {
						format = format.replace(new RegExp(keyWord, 'g'), timeObj[keyWord])
					}
				}
				return format
			},
		}
	}
</script>

<style lang="scss">
	.contents {
		.up{
			width: 20rpx;
			height: 12rpx;
			position:absolute;
			top:155rpx;
			right:50rpx
			}
		.table {
			display: flex;

			flex-direction: column;
			background-color: #fff;
			text-align: center;

			.table_content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1px solid #e5e5e5;

				.item_content {
					flex: 1;
				}

				.color {
					color: #a2b5f2;
				}

				.item_content2 {
					flex: 2;
				}
			}

			.table_header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #d5e4fe;
				font-weight: 600;

				.header_item {
					flex: 1;
				}

				.header_item1 {
					flex: 2;
				}
			}
		}

		.plate_search {
			display: flex;
			height: 110rpx;
			margin: 10rpx;
			padding: 0 35rpx;
			border-top: 10rpx solid #f5f5f5;
			width: 100%;
		}

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			background-color: #f5f5f5;
			margin-top: 18rpx;
			padding: 0 35rpx;
			font-size: 28rpx;
			font-weight: 600;

			.right {
				float: right;
				font-size: 28rpx;
				font-weight: 500;
			}
		}

		.header-search {
			height: 200rpx;
			padding: 0 35rpx;

			.time {
				width: 233rpx;
				height: 66rpx;
				margin-left: 20rpx;
				border: 1px solid #666;
				line-height: 66rpx;
				display: flex;
				justify-content: space-around;
				border-radius: 10rpx;
				color: #a3a3a3;
			}

			.blcak {
				color: #000;
			}

			.ccc {
				color: #a3a3a3;
			}

			.line {
				width: 10rpx;
				height: 5rpx;
				background-color: #a3a3a3;
				margin-left: 10rpx;
			}
		}
	}
</style>
